<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/buyer/css/main.css">
    <link rel="stylesheet" type="text/css" href="/static/buyer/layui/css/layui.css">
    <script type="text/javascript" src="/static/buyer/layui/layui.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script type="text/javascript" src="/static/buyer/js/jquery-1.12.4.min.js"></script>
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/Buyer/index/">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login"><a href="/Buyer/index/">登录</a></div>
            <div class="sp-cart"><a href="/Buyer/shopping_car/">购物车</a><span>2</span></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="/Buyer/index/" title="母婴商城">
                    <img src="/static/buyer/img/logo.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="" class="layui-form" novalidate>
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入需要的商品">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base  login-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="/Buyer/all_goods/0/" class="active">所有商品</a>
                    <a href="/Buyer/tuan_gou/">今日团购</a>
                    <a href="/Buyer/zi_xun/">母婴资讯</a>
                    <a href="/Buyer/jian_jie/">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="login-bg">
        <div class="login-cont w1200">
            <div class="form-box" style="height: 500px">
                <div style="margin-top: 10px">
                    <div style="float: left;background-color:#DDA0DD;height: 40px;width: 40%;font-size: 20px;line-height:40px;text-align: center">
                        <a href="/Buyer/register/">注册</a>
                    </div>
                    <div style="float: right;background-color:#DDA0DD;height: 40px;width: 40%;font-size: 20px;line-height:40px;text-align: center">
                        <a href="/Buyer/login/">登录</a>
                    </div>
                </div>
                <form class="layui-form" action="" method="post">
                    {% csrf_token %}
                    <legend style="margin-top: 40px">母婴商城</legend>
                    <div class="layui-form-item">
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-cellphone iphone-icon"></i>
                                <input type="tel" name="phone"  lay-verify="required|phone"
                                       placeholder="请输入手机号" autocomplete="off" class="layui-input" id="telephone">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <input type="password" name="password"  lay-verify="required|phone"
                                       placeholder="请您输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline" style="float: left; ">
                                <input type="text" name="valid_code"  lay-verify="required|phone"
                                       placeholder="请输入验证码" autocomplete="off"  class="layui-input" >
                                <br>
                                <input type="button" id="crate_valid_code" value="发送验证码" autocomplete="off" style="width: 40%; height: 35px" onclick="create_code()">
                                <input type="reset" id="reset" value="重置信息" style="width: 40%; height: 35px; float: right">
                            </div>

                        </div>

                    </div>
                    <div>
                        {{ error_message }}
                    </div>
                    <div class="layui-form-item login-btn">
                        <div class="layui-input-block">
                            <input type="submit" value="点击登录"
                                   style="width: 60%;margin-left: 20%;height: 40px;background-color:#DDA0DD;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="ng-promise-box">
        <div class="ng-promise w1200">
            <p class="text">
                <a class="icon1" href="javascript:;">7天无理由退换货</a>
                <a class="icon2" href="javascript:;">满99元全场免邮</a>
                <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
            </p>
        </div>
    </div>
    <div class="mod_help w1200">
        <p>
            <a href="javascript:;">关于我们</a>
            <span>|</span>
            <a href="javascript:;">帮助中心</a>
            <span>|</span>
            <a href="javascript:;">售后服务</a>
            <span>|</span>
            <a href="javascript:;">母婴资讯</a>
            <span>|</span>
            <a href="javascript:;">关于货源</a>
        </p>
        <p class="coty">母婴商城版权所有 &copy; 2012-2020</p>
    </div>
</div>
<script type="text/javascript">
    function create_code() {
        var telephone = $('#telephone').val();
        if (telephone){
            $.ajax({
                url: '/Buyer/slc/',
                type: 'post',
                <!--django的POST请求校验，因为csrf中间件的存在，必须传递参数csrf_token，而传递的参数必须是字符串-->
                data: {'telephone': telephone, "csrfmiddlewaretoken":"{{ csrf_token }}"},
                success:function (data) {
                    alert('验证码发送成功，请注意查收')
                },
                error:function (error) {
                    console.log(error)
                }
            })
        }else {
            alert('请输入手机号')
        }
    }
</script>

</body>
</html>